import React, { useState } from "react"
import styled from "styled-components"
import Logo from "@/assets/logo.svg"
import { useNavigate, Link } from "react-router-dom"
import { registerUser } from "@/apis/common"
import { useToast } from "@/utils/useToast"
import bcrypt from "bcryptjs"
import {   
  validateUsername, 
  validatePassword, 
  validatePasswordMatch, 
  validateEmail 
} from "@/utils/validations"

function Register(){
  const navigate = useNavigate()

  const toast = useToast()

  const [user, setUser] = useState({
    username: "",
    email: "",
    password: "",
    confirmPassword: ""
  })

  const handleChange = (e) => {
    setUser({
      ...user,
      [e.target.name]: e.target.value
    })
  }

  const handleValidation = (e) => {
    const { username, email, password, confirmPassword } = user
    if (!validateUsername(username)) {
      toast.error("Username is not valid")
      return false
    }
    else if (!validateEmail(email)) {
      toast.error("Email is not valid")
      return false
    }
    else if (!validatePassword(password)) {
      toast.error("Password is not valid")
      return false
    }
    else if (!validatePasswordMatch(password, confirmPassword)) {
      toast.error("Passwords do not match")
      return false
    }
    return true
  }

  
  const handleSubmit = async (e) => {
    e.preventDefault()

    // 验证通过
    if(handleValidation()){
      // 发送请求
      const [success, data ] = await registerUser(user)
      if(success){
        navigate("/login")
      } else {
        toast.error(data)
      }
    }
  }

  return <>
    <FormContainer>
      <form action="POST" onSubmit={(e) => handleSubmit(e)}>
        <div className="brand">
          <img src={ Logo } alt="" />
          <h1>Snappy</h1>
        </div>
        <input 
          type="text" 
          placeholder="Username" 
          name="username" 
          onChange={(e) => handleChange(e)} 
          required
        />
        <input
          type="email"
          placeholder="Email"
          name="email"
          onChange={(e) => handleChange(e)}
          required
        />
        <input
          type="password"
          placeholder="Password"
          name="password"
          onChange={(e) => handleChange(e)}
          required
        />
        <input
          type="password"
          placeholder="Confirm Password"
          name="confirmPassword"
          onChange={(e) => handleChange(e)}
          required
        />
        <button type="submit">Create User</button>
        <span>Already have an account ? <Link to="/login">Login</Link></span>
      </form>
    </FormContainer>
  </>
}

const FormContainer = styled.div`
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  align-items: center;
  background-color: #131324;
  .brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    img {
      height: 5rem;
    }
    h1 {
      color: white;
      text-transform: uppercase;
    }
  }

  form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    background-color: #00000076;
    border-radius: 2rem;
    padding: 3rem 5rem;
  }
  input {
    background-color: transparent;
    padding: 1rem;
    border: 0.1rem solid #4e0eff;
    border-radius: 0.4rem;
    color: white;
    width: 100%;
    font-size: 1rem;
    &:focus {
      border: 0.1rem solid #997af0;
      outline: none;
    }
  }
  button {
    background-color: #4e0eff;
    color: white;
    padding: 1rem 2rem;
    border: none;
    font-weight: bold;
    cursor: pointer;
    border-radius: 0.4rem;
    font-size: 1rem;
    text-transform: uppercase;
    &:hover {
      background-color: #4e0eff;
    }
  }
  span {
    color: white;
    text-transform: uppercase;
    a {
      color: #4e0eff;
      text-decoration: none;
      font-weight: bold;
    }
  }
`;

export default Register